<template>
  <el-card class="box-card" shadow="always">
    <el-descriptions class="margin-top" :column="2"  border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          库表名称
        </template>
        {{this.tform.dataResourceName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          库表版本
        </template>
        {{this.tform.dataResourceVersion}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          备注
        </template>
        {{this.tform.remark}}
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions direction="vertical" :column="5" border>
      <el-descriptions-item label="表名" :span="5" content-style="text-align: center" label-style="text-align: center">
        {{this.tform.executeConfig.tableName}}
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions direction="vertical" :column="5" border>
      <el-descriptions-item label="字段列表" :span="5"  label-style="text-align: center">
        <el-table
          v-loading="false"
          :data="this.tform.executeConfig.fieldParams"
          tooltip-effect="dark"
        >
          <template v-for="(item, index) in columns">
            <el-table-column
              v-if="item.show"
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :formatter="item.formatter"
              align="center"
              show-overflow-tooltip
            />
          </template>
        </el-table>
      </el-descriptions-item>
    </el-descriptions>
  </el-card>
</template>

<script>
  import {getDataDetail, getDataTableInfoDetail } from '@/api/market/table'
export default {
  name: 'DataTableInfo',
  components: {

  },
  props: {
    tableId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      title: '库表资源信息',
      // 表单参数
      tform: {
        id: undefined,
        dataResourceName: undefined,
        dataResourceVersion: undefined,
        remark: undefined,
        executeConfig: undefined,
        resParams: [],
        resExample: [],
        header:{}
      },
      columns: [
        { prop: 'columnName', label: '字段名称', show: true },
        { prop: 'dataType', label: '数据类型', show: true },
        { prop: 'dataLength', label: '长度', show: true },
        { prop: 'columnKey', label: '是否主键', show: true },
        { prop: 'columnNullable', label: '是否可空', show: true },
      ],

      // 请求方式数据字典
      reqMethodOptions: [],
      // 返回格式数据字典
      resTypeOptions: [],
      // 是否数据字典
      whetherOptions: [],
      // 状态数据字典
      statusOptions: [],
      // 数据源数据字典
      sourceOptions: [],
      // 数据库表数据字典
      tableOptions: [],
      // 配置方式数据字典
      configTypeOptions: [],
      // 操作符数据字典
      whereTypeOptions: [],
      // 参数类型数据字典
      paramTypeOptions: []
    }
  },
  created() {
    this.getDicts('sys_yes_no').then(response => {
      if (response.success) {
        this.whetherOptions = response.data
      }
    })
    this.getDicts('data_api_status').then(response => {
      if (response.success) {
        this.statusOptions = response.data
      }
    })
    this.getDicts('data_config_type').then(response => {
      if (response.success) {
        this.configTypeOptions = response.data
      }
    })
    this.getDicts('data_where_type').then(response => {
      if (response.success) {
        this.whereTypeOptions = response.data
      }
    })
    this.getDicts('data_param_type').then(response => {
      if (response.success) {
        this.paramTypeOptions = response.data
      }
    })
  },
  mounted() {
    this.getDataTable(this.tableId)
  },
  methods: {

    /** 获取详情 */
    async getDataTable(id) {
      await getDataDetail(id).then(response => {
        if (response.success) {
          this.tform = response.data.data
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card ::v-deep .el-card__body {
  height: calc(100vh - 230px);
  overflow-y: auto;
}
</style>
